<template>
  <div class="oridomi-container">
    <el-button class="accordion1" size="mini">accordion1</el-button>
    <el-button class="curl" size="mini">curl</el-button>
    <el-button class="flodup" size="mini">flodUp</el-button>
    <el-button class="accordion2" size="mini">accordion2</el-button>
    <el-button class="reduction" size="mini">还原</el-button>
    <div class="dom">
      <img src="../../../assets/indexhot.png" width="600" height="260"/>
    </div>
  </div>
</template>

<script>
import OriDomi from 'oridomi'
export default {
  mounted() {
    const od = new OriDomi(document.querySelector('.dom'), {
      vPanels: 5,
      hPanels: 3,
      speed: 2000,
      ripple: true,
      shadingIntensity: 0.5,
      perspective: 800,
      maxAngle: 40,
      shading: 'sort'
    })
    document.querySelector('.accordion1').addEventListener('click', function() {
      od.accordion(30)
    })
    document.querySelector('.curl').addEventListener('click', function() {
      od.curl(-50, 'top')
    })
    document.querySelector('.flodup').addEventListener('click', function() {
      od.foldUp()
    })
    document.querySelector('.accordion2').addEventListener('click', function() {
      od.setRipple().accordion(28).stairs(-40)
    })
    document.querySelector('.reduction').addEventListener('click', function() {
      // od.curl(0, 'top')
      od.accordion(0)
    })
  }
}
</script>

<style scoped>
  .oridomi-container {
    height: 100%;
    width: 100%;
  }
</style>
